<template>
  <div class="contacts">
    <header-bar title="通讯录">
    </header-bar>
    <div class="list-view-container">
      <list-view :data="contactList" ref="list"></list-view>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import ListView from '@/components/ListView'
  import {contactList} from '@/data/contacts'
  import HeaderBar from '@/components/HeaderBar'

  export default {
    components: {
      ListView,
      HeaderBar
    },
    data(){
      return {
        contactList
      }
    },
    create(){
      this.$refs.list.refresh()
    }
  }
</script>

<style lang="less">
  @import '../../styles/variables.less';
  #app > div > div.content > div.vux-header.header-bar > div.vux-header-left,
  #app > div > div.content > div.vux-header.header-bar > div.vux-header-left > a,
  #app > div > div.content > div.vux-header.header-bar > div.vux-header-left > div{
        visibility: hidden;
  }
  .list-view-container{
    position: absolute;
    top: @height-header-bar;
    bottom: 0;
    width: 100%;
    }

</style>
